import React,{PureComponent} from 'react'
import {ScrollView,DeviceEventEmitter,StyleSheet,View,Text,TouchableOpacity,Button,Animated} from 'react-native'
import color from '../color'

type Props = {
    subjects:[],
    index:number,
    callbackSelect:Function,
}
export default class SelectSubjectScrollTab extends PureComponent<Props>{
    constructor(props){
        super(props)
        this.state = {
            transX : 0,
            ke_mus:['','math','chinese','english'],
        }
    }



    clickCell(item){

        this.props.callbackSelect(item)
        DeviceEventEmitter.emit('subject',this.state.ke_mus[item])
    }

    cell(data,i){
        if (i == this.props.index)
        {
            this.setState({
                transX:(i*(27+17))
            })
            return (
                    <TouchableOpacity style={{height:44,alignItems:'center',justifyContent:'center'}} key={i} onPress={()=>{this.clickCell(i)}}>
                        <Text  style={styles.subject_select_title}>{data}</Text>
                    </TouchableOpacity>
            )
        }else {
            return  <TouchableOpacity style={{height:44,alignItems:'center',justifyContent:'center'}} key={i} onPress={()=>{this.clickCell(i)}}>
                    <Text style={styles.subject_title}>{data}</Text>
            </TouchableOpacity>

        }

    }

    renderCell(){
       var cells = [];
        for (var i = 0; i < this.props.subjects.length; i ++){
            let data = this.props.subjects[i]
            let cell = this.cell(data,i)
            cells.push(cell)
        }
        return <View style={{alignItems:'center', flexDirection:'row',flex:1,height:45}}>{cells}</View>
    }

    render(){
        return (
                <View style={{height:46}}>
                    <View style={styles.container}>
                            {this.renderCell()}
                    </View>
                    <Animated.View  style={{
                        width: 27, height: 1, backgroundColor: color.globalMainColor, marginLeft: 12,
                        transform: [{translateX:this.state.transX},]
                    }}/>
                </View>


        )
    }

}
const styles = StyleSheet.create({
    container:{
        backgroundColor:'#f9f9f9',
        height:45,
        alignItems:'center',
        flexDirection:'row',
    },
    subject_title:{
      color:'rgba(0,0,0,0.8)',
        fontSize:14,
        marginLeft:12,
        marginRight:3,
    },
    subject_container_title:{
        flexDirection:'row',
    },
    subject_select_title:{
        color:'red',
        fontSize:14,
        marginLeft:12,
        marginRight:3,
    },
})